<template>
    <div class="message-tip">{{message.text}}</div>
</template>

<script lang="ts">
import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
import { useI18n } from 'vue-i18n'
const MessageTip =  defineComponent({
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
  },
  setup(props:any, ctx:any) {
		const { t } = useI18n()
    const data = reactive({
      message: {},
    });

    watchEffect(()=>{
      data.message = props.data;
			var messageText = ''
			//[userName] 成功加入群组 [groupName]
			if(data.message.text.indexOf('加入群组') > -1) {
				messageText = t('chat.chat_tips[1]')
				messageText = messageText.replace('[userName]',data.message.message.nick)
				messageText = messageText.replace('[groupName]',data.message.message.payload.groupProfile.groupName)
				data.message.text = messageText
			}
			//修改群名为 [groupName]
			if(data.message.text.indexOf('修改群名为') > -1) {
				messageText = t('chat.chat_tips[13]')
				messageText = messageText.replace('[groupName]',data.message.message.payload.newGroupProfile.groupName)
				data.message.text = messageText
			}
			//更换了新群聊的头像
			if(data.message.text.indexOf('更换了新群聊的头像') > -1) {
				data.message.text = t('chat.chat_tips[20]')
			}
			//发布新公告:[notice]
			if(data.message.text.indexOf('发布新公告') > -1) {
				console.log(data.message)
				messageText = t('chat.chat_tips[21]')
				messageText = messageText.replace('[notice]',data.message.message.payload.newGroupProfile.notification)
				data.message.text = messageText
			}
    });
    return {
      ...toRefs(data),
    };
  }
});
export default MessageTip
</script>
<style lang="scss" scoped>
.message-tip {
  margin: 8px auto 0;
  color: #999999;
	font-size: 13px;
	text-align: center;
}
</style>
